作者官網:
http://yiming_chang.gitee.io/pure-admin-doc/pages/RBAC/#%E7%94%A8%E6%88%B7

重點

分成 頁面權限(ex:權限管理page) & 標籤節點權限(ex:下載按鈕)
以下是一個作者的範例

/**
 * admin ： 管理員角色
 * common ： 普通角色
 */

const permissionRouter = {
  path: "/permission",
  meta: {
    title: "权限管理",
    icon: "lollipop",
    rank: 10
  },
  children: [
    {
      path: "/permission/page/index",
      name: "PermissionPage",
      meta: {
        title: "页面权限",
        roles: ["admin", "common"]
      }
    },
    {
      path: "/permission/button/index",
      name: "PermissionButton",
      meta: {
        title: "按钮权限",
        roles: ["admin", "common"],
        auths: ["btn_add", "btn_edit", "btn_delete"]
      }
    }
  ]
};

可以看到路由meta裡面都有 roles 不同角色能觀看不同網頁page
auths 則控制了 該page哪些元素節點(ex:按鈕) 是否會出現

使用

共有3個控管方式

1. 元件包住
2. v-if="hasAuth('btn_add')" v-if判斷
3. 自訂指令方式(了解 directives)

3個都支援傳入字串&陣列字串
以下是作者程式碼範例

<script setup lang="ts">
import { type CSSProperties, computed } from "vue";
import { hasAuth, getAuths } from "@/router/utils";

defineOptions({
  name: "PermissionButton"
});

const elStyle = computed((): CSSProperties => {
  return {
    width: "85vw",
    justifyContent: "start"
  };
});
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-tag :style="elStyle" size="large" effect="dark">
      当前拥有的code列表：{{ getAuths() }}
    </el-tag>

    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">组件方式判断权限</div>
      </template>
      <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
        <el-button type="danger">
          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
        </el-button>
      </Auth>
    </el-card>

    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">函数方式判断权限</div>
      </template>
      <el-button
        type="danger"
        v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
      >
        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
      </el-button>
    </el-card>

    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">
          指令方式判断权限（该方式不能动态修改权限）
        </div>
      </template>
      <el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
      </el-button>
    </el-card>
  </el-space>
</template>

頁面後端控制 ok
元素節點會 耦合 所以 btn_add btn_edit 這類的關鍵字要統一
若後端改了前端會不支援

===============

構思實際使用

前端打API 登入，取得該帳號的路由表(包含 頁面權限+元素節點權限)
這樣後台要有
0. 功能列表 (功能crud)

1. 角色管理 (角色crud) 該角色有哪些功能(ex: 新增,刪除,修改,閱讀,下載,列印...etc)
2. 帳號管理 (帳號crud) 該帳號有哪些角色 若有2個角色會做 功能聯集

會需要知道路由meta作者定義哪些關鍵字: link

/**
//統整需要的欄位 不包含關聯
// pure-admin v3.9以上
// 爸爸
1.id
2.path string
3.name string
meta
  4.title string
  5.icon string
  6.showLink boolean
  7.rank number(越小越上面)

//非爸爸 子路由
1.id
2.path string
3.name string
meta
  4.title string
  5.icon string
  6.showLink boolean
  7.roles Array<string>
  8.auths Array<string>
  9.hiddenTag boolean (当前菜单名称 禁止添加到标签页)

 */
 
 共計10個，主要以子路由為主(9) + 頂路由的rank(1)
 

其他前端用不到的欄位:

isEnabled: 1, 是否啟用
menuFunctionIdOfParent: 1, 爸爸是誰
isFather: 1, 是否是爸爸
isChuild: 0, 是否是小孩